<!--
 * @author  hemengxia
 预览福利发放个性化配置详情
-->
<template>
  <div class="live-remind-preview">
    <el-dialog
      v-el-drag-dialog
      :close-on-click-modal="false"
      :visible.sync="state"
      title="预览"
      width="415px"
      center
      :before-close="handleCancel"
    >
      <div class="preview-container">

        <div class="detail-content" :class="{'custom': obj.remindType === '1' }">
          <img :src="view+obj.remindImg">
          <div class="content">
            <div class="text-content">
              <p :style="{'color':obj.contentColor}">亲爱的XXX:
              </p>
              <p :style="{'color':obj.contentColor}">{{ type === 'preview' ? obj.remindContent : '提醒内容' }}</p>
            </div>
            <div class="btn" :style="{'background':obj.buttonBGC,'color':obj.buttonBGW}">查看直播</div>

          </div>
        </div>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="handleCancel()">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
export default {
  name: 'LiveRemindPreview',
  directives: { elDragDialog },
  props: {
    id: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'preview'
    },
    obj: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      state: true,
      view: '/API-DOCUMENT/document/file/download?id='
    }
  },
  created() {
  },
  methods: {

    handleCancel() {
      this.$emit('closeSet')
    }
  }
}
</script>

<style lang="scss">

.live-remind-preview {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;

  .preview-container {
    position: relative;
    text-align: center;
    height: 80vh;
    background-color: rgba(0,0,0,0.6);
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
    }

    .detail-content {
      position: relative;

      img {
        width: 375px;
        height: 525px;
      }

      &.custom {
        top:30%;
        img {
          width: 270px;
          height: 250px;

        }
      }

      .content {
        position: absolute;
        bottom: 0;
        width: 375px;
        padding: 0 55px;
        height: 225px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        .text-content {
          max-height: 115px;
          overflow-y: auto;

          p {
            padding: 0 15px;
            text-align: left;
            margin: 0;
            &:first-child {
              font-size: 15px;
              font-family: PingFang SC Medium, PingFang SC Medium-Medium;
              font-weight: bold;
              text-align: left;
            }

            &:last-child {
              font-size: 14px;
              margin-top: 20px;
              white-space: pre-wrap;
            }

          }
        }

        .btn {
          margin: 0 auto;
          width: 215px;
          height: 40px;
          line-height: 40px;
          opacity: 1;
          border-radius: 20px;
          font-size: 16px;
          font-family: PingFang SC Medium, PingFang SC Medium-Medium;
          font-weight: bold;
          text-align: center;
        }
      }
    }

  }
}
</style>
